import React, {Component} from "react";

import './02-style.css'

export default class App extends Component {

    // 类组件中定义响应式状态通过 state 进行定义，相当于 vue 中的 data 
    // state 为固定写法,因为我们要修改数据，那么修改数据只能通过 setState 进行修改
    state = {
        // 这里可以定义一些初始响应数据
        flag: true
    }

    render(){
        return (<>
            {/* 通过三目运算来实现不同值使用不同的 class */}
            <div className={this.state.flag ? 'active' : 'box'}>App 组件</div>
            <button onClick={()=>{
                // 在 react 中无法直接修改数据，因为在 react 中有专门用来修改数据的方法
                // this.state.flag = !this.state.flag

                // setState 是 react 中唯一修改数据的方法，微信小程序开发的时候也是这种写法
                this.setState({
                    flag: !this.state.flag
                })

            }}>求点击</button>
        </>)
    }
}

